*{
		padding: 0;
		margin: 0;
}

body{
			height:850px;
			background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
			background-size: 400%;
			animation: bga 15s infinite;
}
@keyframes bga{
	0%{
			background-position: 0% 50%;
	}
	50%{
			background-position: 100% 50%;
	}
	100ss%{
			background-position: 0% 50%;
	}
}

/*set the login -box*/
.login-box{	
			position: absolute;
			top: 50%;
			left: 50%;
			background: #FFFFFF;
			transform-style: preserve-3d;
			transform: translate(-50%,-50%) perspective(2000px);
			box-shadow:inset 400px 0 50px rgba(0,0,0,.5),0 20px 100px rgba(0,0,0,.5);
			transition: 1.5s;	
			height: 500px;
			width: 400px;
			
		

}
.login-box:hover{
			transform: translate(-50%,-50%) perspective(2000px) rotate(-10deg);
			box-shadow:inset 30px 0 50px rgba(0,0,0,.5),0 10px 100px rgba(0,0,0,.5);
}
.login-box:before{
			content: "";
			position: absolute;
			top: -5px;
			left: 0;
			width: 100%;
			height:6px;
			background: #916F7D;
			transform-origin: bottom;
			transform: skewX(-45deg);
}
.login-box:after{
			content: "";
			position: absolute;
			top:0;
			right: -5px;
			width:  6px;
			height:100%;
			background:#493F47;
			transform-origin:left;
			transform: skewY(-45deg);
}



.login-box .imgBox{
			width: 100%;
			height: 100%;
			/*background: #800080;*/
			position: relative;
			transform-origin:left;
			transition: 1s;
			z-index: 1;
}
.login-box:hover .imgBox{
			transform: rotateY(-135deg);
}

.login-box .detail{
			position: absolute;
			top: 0;
			left: 0;
			box-sizing: border-box;
			padding: 20px;
			z-index: -1;
}
#title{
			text-align:  center;
			font-size:40px;
			font-family: "goudy stout";
			font-weight: bold;
			font-style: italic;
			color:palevioletred;
			padding: 15px  0;
			transition: .8s;
}
#title:hover{
			transform: scale(1.2);
			background-image: linear-gradient(130deg,gold, purple);
			-webkit-background-clip: text;
			color: transparent;
}
 
form{
			width: 400px;
			height: 300px;
			/*background-color: #bfa;*/
	}
form #email,
form #pwd{
			 border: none;
			 outline: none;
			 width: 240px;
			 height: 50px;
			 margin: 20px 68px;
			
			 border-radius: 25px;
			 border: 2px solid green;
			 background: transparent;
			 text-align: center;
			 font: 20px bold ;
			 color: black;
			 transition: .6s;
	}
form #email:focus,
form #pwd:focus{
		 	transform: scaleX(1.4);
		 
		 
}

.cb{
			 width: 60%;
			 height: 50px;
			 /*line-height: 50px;*/
			 margin-left: 40px;
			 text-align: left;	
			 color: darkgreen;
	}
#btn{
			border: none;
			outline: none;
			width: 160px;
			height: 50px;
			border-radius: 30px;
			margin: 0 30%;
			font-size: 20px;
			color: white;		
			background-image: linear-gradient(90deg,#03a9f4 ,#f441a5,#ffeb3b,#03a9f4 );
			background-size: 400%;
			transition: .5s;
			z-index: 1;
}

#btn:hover{
			animation: anmi 8s linear infinite;
}
@keyframes anmi
{
	0%{
			background-position: 0%;
	}
	0%{
			background-position: 0%;
	}
	100%{
			background-position: 400%;
	}
}

a{
			display: block;
			text-decoration: none;
			text
			width: 80%;
			height: 20px;	
			margin: 5% 10%;
			color: darkgreen;
}
a:hover{
	 		color: wheat;
}
